<template>
	<view class="">
		<view class="table-heade leading-100px flex flex-x-between text-28px">
			<text class="w-1-4 text-center">用户类别</text>
			<text class="w-1-4 text-center">已支付(单)</text>
			<text class="w-1-4 text-center">未支付(单)</text>
		</view>
		<view v-for="(item,index) in state" :key="item.id" :class="index%2===0?'bg-f1f1f1':''"
			class="table-body leading-80px flex flex-x-between text-28px">
			<text class="w-1-4 text-center">{{item?.type}}</text>
			<text class="w-1-4 text-center">{{item?.paid}}</text>
			<text class="w-1-4 text-center">{{item?.unpaid}}</text>
		</view>
		<view class="table-footer leading-80px flex flex-x-between">
			<text class="w-1-4 text-center">合计</text>
			<text class="w-1-4 text-center">{{paidTotal}}</text>
			<text class="w-1-4 text-center">{{unpaidTotal}}</text>
		</view>
	</view>
</template>

<script setup name="NewOldStu">
	import {
		ref,
		reactive,
		computed
	} from 'vue';

	const emit = defineEmits(['update:modelValue'])

	const props = defineProps({
		modelValue: {
			type: Object,
			default: () => ({}),
		},
	})

	const state = computed({
		get() {
			return props.modelValue
		},
		set(value) {
			emit('update:modelValue', value)
		},
	})

	// 统计 已支付
	const paidTotal = computed(() => {
		return state.value.reduce((prev, item) => prev + Number(item.paid), 0) || 0
	})

	// 统计 未支付
	const unpaidTotal = computed(() => {
		return state.value.reduce((prev, item) => prev + Number(item.unpaid), 0) || 0
	})
</script>